import Vue from 'vue'
import Vuex from 'vuex'
// 让vue具备vuex功能
Vue.use(Vuex)

// 实例化vuex对象（也称之为store对象），并把它暴露出去
export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // state就是vuex里放数据的地方
  state: {
    count: 0,
    money: 999,
    cartList: []
  },
  // vuex里的计算属性
  getters: {
    // 当某个数据依赖多个数据计算得来，就可以用计算属性
    // 固定参数：state，得到的就是当前的state
    totalPrice (state) {
      return state.cartList.reduce((sum, v) => sum += v.price, 0)
    }
  },
  // 是放同步方法的地方，也是唯一允许修改state的地方
  mutations: {
    // 参数1：固定的叫state，这个state就是获取当前对象的state
    addOne (state) {
      state.count++
    },

    // 第二个参数就是额外传递过来的参数
    // 只能接收一个额外参数
    // addCount (state, num, num2) {
    addCount (state, num) {
      // console.log(num)// 5 undefined
      state.count += num
    },

    setCartList (state, list) {
      state.cartList = list
    }
  },

  // 也是放方法的地方
  // 这是写异步方法的地方
  actions: {
    // 参数1：固定的context，也可以简写为ctx，代表了当前store对象
    // 跟mutations一样，也只能接收1个额外参数
    reqCartList (ctx) {
     
      setTimeout(() => {
        // 得到一个服务器返回的数组
        const list = [
          { id: 1, name: '皮鞋', price: 9.9 },
          { id: 2, name: '凉鞋', price: 7699 },
          { id: 3, name: '外套', price: 2399 },
          { id: 4, name: '斜挎包', price: 17900 },
        ]

        // 调用muations的方法进行保存
        ctx.commit('setCartList', list)

      }, 1000);
    }
  },
  modules: {}
})
